<template>
  <div class="search">
    <!-- <a-input-search v-model:value="state.params" :placeholder="pl" allow-clear @search="onSearch">
    </a-input-search> -->

    <a-input-group compact>
      <a-select
        size="large"
        style="width: 26%"
        v-model:value="state.selectValue"
        @change="onChange"
      >
        <a-select-option
          size="large"
          v-for="item in searchOptions"
          :value="item.value"
          >{{ item.label }}</a-select-option
        >
      </a-select>
      <a-input-search
        allow-clear
        size="large"
        style="width: 74%"
        v-model:value="state.inputValue"
        :placeholder="pl"
        @search="onSearch"
      />
    </a-input-group>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";

const emit = defineEmits(["onSearch", "change"]);
const props = defineProps({
  searchOptions: {
    type: Array,
    default: () => [],
  },
  pl: {
    type: String,
    default: "请输入内容",
  },
});

const state = reactive({
  params: "",
  inputValue: "",
  selectValue: "",
});

const onSearch = () => {
  console.log("11");

  emit("onSearch", {
    selectValue: state.selectValue,
    inputValue: state.inputValue,
  });
};
const onChange = () => {
  emit("change");
};
onMounted(() => {
  state.selectValue = props?.searchOptions[0].value;
});
</script>
<style scoped lang="less">
.search {
  // margin-bottom: 12px;
  // :deep(.ant-input-affix-wrapper:hover) {
  //   border-color: transparent !important;
  // }

  // :deep(.ant-input-group .ant-input-affix-wrapper:not(:last-child)) {
  //   border-radius: 0 !important;
  // }
  :deep(
      .ant-input-search
        .ant-input-group
        .ant-input-affix-wrapper:not(:last-child)
    ) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
}
</style>
